<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="assets/css/ace.min.css" />
	<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
	<link rel="stylesheet" href="Widget/zTree/css/metroStyle/metroStyle.css" type="text/css">
	<link href="Widget/icheck/icheck.css" rel="stylesheet" type="text/css" />
	<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
	<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/typeahead-bs2.min.js"></script>
	<!-- page specific plugin scripts -->
	<script src="assets/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
	<script type="text/javascript" src="js/H-ui.js"></script>
	<script type="text/javascript" src="js/H-ui.admin.js"></script>
	<script src="assets/layer/layer.js" type="text/javascript"></script>
	<script src="assets/laydate/laydate.js" type="text/javascript"></script>
	<script type="text/javascript" src="Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
	<script src="js/lrtk.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/page/popup.js"></script>
	<link rel="stylesheet" href="css/popup.css" />
	<link rel="stylesheet" href="css/page.css" />
	<title>产品列表</title>


</head>

<body>
	<div class=" page-content clearfix">
		<div id="products_style">
			<div class="search_style">

				<ul class="search_content clearfix">
					<li><label class="l_f">产品名称</label><input name="" type="text" class="text_add" id="productsName"
							placeholder="输入产品名称" style="width: 250px" /></li>
					<li><label class="l_f">添加时间</label><input class="inline laydate-icon" id="start"
							style="margin-left: 10px;">
					</li>
					<li style="width: 90px;"><button id="search1" type="button" class="btn_search">
							<i class="icon-search"></i>查询
						</button></li>
				</ul>
			</div>
			<div class="border clearfix">
				<span class="l_f"> <a href="picture-add.html" title="添加商品" class="btn btn-warning Order_form"><i
							class="icon-plus"></i>添加商品</a>
					<a href="javascript:void()" id="danger" class="btn btn-danger"><i class="icon-trash"></i>批量删除</a>
				</span> <span class="r_f">共：<b>[[${totalCount}]]</b>件商品
				</span>
			</div>
			<!--产品列表展示-->
			<div class="h_products_list clearfix" id="products_list">
				<div id="scrollsidebar" class="left_Treeview">
					<div class="show_btn" id="rightArrow">
						<span></span>
					</div>
					<div class="widget-box side_content">
						<div class="side_title">
							<a title="隐藏" class="close_btn"><span></span></a>
						</div>
						<div class="side_list">
							<div class="widget-header header-color-green2">
								<h4 class="lighter smaller">产品类型列表</h4>
							</div>
							<div class="widget-body">
								<div class="widget-main padding-8">
									<div id="treeDemo" class="ztree"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="table_menu_list" id="testIframe">
					<table class="table table-striped table-bordered table-hover" id="sample-table">
						<thead>
							<tr>
								<th width="25px"><label><input id="checkAll" type="checkbox" class="ace"><span
											class="lbl"></span></label></th>
								<th width="80px">产品编号</th>
								<th width="250px">产品名称</th>
								<th width="100px">市场价格</th>
								<th width="100px">展示价格</th>
								<th width="100px">所属地区/国家</th>
								<th width="180px">加入时间</th>
								<th width="80px">审核状态</th>
								<th width="70px">状态</th>
								<th width="200px">操作</th>
							</tr>
						</thead>
						<tbody id="tbodyId">

						</tbody>

					</table>
					<div id="findNull" hidden="hidden">查无记录!</div>
					<!-- 分页 -->
					<div id="fy" class="paging mt30">
						<ul id="page">
							<li>
								<a>上一页</a>
							</li>
							<li>
								<a>首页</a>
							</li>
							<li class="active">
								<a>1</a>
							</li>
							<li>
								<a>2</a>
							</li>
							<li>
								<a>3</a>
							</li>
							<li>
								<a>4</a>
							</li>
							<li>
								<a>5</a>
							</li>
							<li>
								<a>...</a>
							</li>
							<li>
								<a>末页</a>
							</li>
							<li>
								<a class="borderNone">下一页</a>
							</li>
						</ul>
					</div>


				</div>
			</div>
		</div>
	</div>
	<!-- </div> -->
</body>
<script src="js/page/page.js"></script>

</html>

<script>
	jQuery(function ($) {
		// var oTable1 = $('#sample-table').dataTable( {
		// "aaSorting": [ 1, "desc" ],//默认第几个排序
		// "bStateSave": true,//状态保存
		// "aoColumnDefs": [
		//   //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
		//   {"orderable":false,"aTargets":[0,2,3,4,5,8,9]}// 制定列不参与排序
		// ] } );


		$('table th input:checkbox').on('click', function () {
			var that = this;
			$(this).closest('table').find('tr > td:first-child input:checkbox')
				.each(function () {
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});

		});


		$('[data-rel="tooltip"]').tooltip({ placement: tooltip_placement });
		function tooltip_placement(context, source) {
			var $source = $(source);
			var $parent = $source.closest('table');
			var off1 = $parent.offset();
			var w1 = $parent.width();

			var off2 = $source.offset();
			var w2 = $source.width();

			if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
			return 'left';
		}
	});
	laydate({
		elem: '#start',
		event: 'focus'
	});
	$(function () {
		$("#products_style").fix({
			float: 'left',
			//minStatue : true,
			skin: 'green',
			durationTime: false,
			spacingw: 30,//设置隐藏时的距离
			spacingh: 260//设置显示时间距
		});
	});

	var po

	$(function () {
		po = new Popup();
		if (conditions === null)
			saveConditions();
		getObjects();
		$("#search1").click(saveConditions);
		var danger = document.getElementById("danger");
		danger.addEventListener("click", function () {
			var ids = doGetCheckedIds();
			if (ids.length === 0) {
				po.alert("提示消息","请先选中需要删除的记录");
				return;
			}
			po.confirm("提示消息", "确认删除吗?", function () {
				deleteProducts(ids);
			}
			)
		});

		$("#tbodyId").on("change", ".ace", doChangeTHeadCheckBoxState);
		/* $(".btn-danger").click(function () {
			if (!confirm("确认删除吗?")) return;
			var ids = doGetCheckedIds();
			if (ids.length === 0) {
				console.log("请先选中");
				return;
			}
			deleteProducts(ids);
		}); */
	});

	function deleteProducts(ids) {
		var url = "product/doDeleteProducts";
		console.log("ids=" + ids);
		$.getJSON(url, { "ids": ids.toString() }, function (result) {
			//$(obj).parents("tr").remove();
			//layer.msg('已删除!', { icon: 1, time: 1000 });
			po.alert("提示消息",result.message);
			getObjects();
		});
	}

	var conditions = null;
	function saveConditions() {
		//console.log("saveConditions");

		var productName = $("#productsName").val();
		var putAwayTime = $("#start").val();
		//var pageCurrent = currentPage;
		currentPage = 1;
		conditions = {
			"putAwayTime": putAwayTime,
			"productName": productName,
			"pid": treeNodeId,
		};
		getObjects();
	}

	function getObjects() {

		$("#checkAll").prop("checked", false);
		document.getElementById("findNull").setAttribute("hidden", "hidden");
		document.getElementById("fy").removeAttribute("hidden");
		var productName = conditions.productName;
		var putAwayTime = conditions.putAwayTime;
		var pid = conditions.pid;
		//console.log("putAwayTime" + putAwayTime + "productName" + productName);

		var params = {
			"putAwayTime": putAwayTime,
			"productName": productName,
			"pid": pid,
			"pageCurrent": currentPage,
			"pageSize": pageSize
		};

		//console.log("putAwayTime=" + params.putAwayTime);
		if (productName) {
			params.productName = productName;
		}
		if (putAwayTime) {
			params.putAwayTime = putAwayTime;
		}
		var url = "product/doFindProducts";
		$.getJSON(url, params, doHandleResponseResult);
		treeNodeId = null;
	}

	function doHandleResponseResult(result) {
		//console.log(result.data);
		if (result.state === 1) {//ok
			//1.更能页面上tbody位置的数据(日志信息)
			var records = result.data.records;
			doSetTableBodyRows(records);
			if (records.length > 0) {
				totalPage = result.data.pageCount;
				// document.getElementById("findNull").removeAttribute("hidden");
				step();
			} else {
				// 查无记录时删除分页
				document.getElementById("fy").setAttribute("hidden", "hidden");
				// 显示查无记录的提示信息
				document.getElementById("findNull").removeAttribute("hidden");
			}
		} else {//error
			po.alert("提示消息", result.message);
		}
	}

	function doSetTableBodyRows(records) {
		//console.log(records);
		//1.获取tbody对象,并清空原有内容
		var tBody = $("#tbodyId");
		//tBody.html("");
		tBody.empty();//jquery中清空数据的函数
		//2.迭代records记录,然后将其追加到tBody中
		for (var i = 0; i < records.length; i++) {
			//循环一次取一行
			//console.log(records[i]);
			//1)构建tr对象
			var tr = $("<tr></tr>");
			//2)构建多个td对象
			var tds = doCreateTds(records[i]);
			//3)将td对象追加到tr中
			tr.append(tds);
			//4)将tr对象追加到tbody中
			tBody.append(tr);
		}
	}


	function doCreateTds(data) {
		//console.log(data);
		//启用状态的tr
		var status = "<td class='td-status'><span class='label label-success radius'>" + data.state.state + "</span></td>" +
			"<td class='td-manage'>" +
			"<a style='text-decoration:none' onClick='member_stop(this," + data.id + ")'  href='javascript:;' title='停用'  class='btn btn-xs btn-success'><i class='icon-ok bigger-120'></i></a> ";
		//停用状态的tr
		var manage = '<td class=td-status><span class="label label-defaunt radius">' + data.state.state + '</span>' + "<td class='td-manage'>" +
			'<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,' + data.id + ')" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>';
		var tags = data.state.id === 1 ? status : manage;
		return "<td width='25px'><input name='cItem' type='checkbox' value='" + data.id + "' class='ace'><span class='lbl'/></td>" +
			"<td width='80px'>" + data.productId + "</td>" +
			"<td width='250px'>" +
			"<u style='cursor: pointer' class='text-primary' onclick=''>" + data.productName + "</u></td>" +
			"<td width='100px'>" + data.originalPrice + "</td>" +
			"<td width='100px'>" + data.currentPrice + "</td>" +
			"<td width='100px'>" + data.area + "</td>" +
			"<td width='180px'>" + data.putAwayTime + "</td>" +
			"<td class='text-l'>" + data.checkState.state + "</td>" +
			tags +
			"<a title='编辑' onclick=member_edit('编辑','Product_Edit?id=" + data.id + "','','" + 510 + "') href='javascript:;' class='btn btn-xs btn-info' >" +
			"<i class='icon-edit bigger-120'></i>" +
			"</a>" +
			"<a title='删除' onclick=member_del(this,'" + data.id + "') href='javascript:;' class='btn btn-xs btn-warning'>" +
			"<i class='icon-trash  bigger-120'></i>" +
			"</a>" +
			"</td>";
	}

	function doChangeTHeadCheckBoxState() {
		var flag = true;
		$("#tbodyId input[name='cItem']").each(function () {
			flag = flag && $(this).prop("checked");
		});
		$("#checkAll").prop("checked", flag);
	}



</script>
<script type="text/javascript">
	//初始化宽度、高度
	$(".widget-box").height($(window).height() - 215);
	$(".table_menu_list").width($(window).width() - 260);
	$(".table_menu_list").height($(window).height() - 215);
	//当文档窗口发生改变时 触发  
	$(window).resize(function () {
		$(".widget-box").height($(window).height() - 215);
		$(".table_menu_list").width($(window).width() - 260);
		$(".table_menu_list").height($(window).height() - 215);
	})

	/*******树状图*******/
	var treeNodeId;
	var setting = {
		//treeId: "tree",
		//treeObj: zNodes,

		view: {
			dblClickExpand: false,
			showLine: false,
			selectedMulti: false
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "parentId",
				//"click": "getId(this)",
				rootPId: ""
			}
		},
		callback: {
			beforeClick: function (treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				//console.log("zTree=" + zTree);
				if (treeNode.isParent) {
					zTree.expandNode(treeNode);
					return false;
				} else {
					demoIframe.attr("src", treeNode.file + ".html");
					return true;
				}
			},
			onClick: function (event, treeId, treeNode) {
				//alert("treeId="+treeId);
				//console.log("treeNode=" + treeNode.checked);
				treeNodeId = treeNode.id;
				/* var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
				var nodes = treeObj.getSelectedNodes();
				for (var i = 0, l = nodes.length; i < l; i++) {
					var node = treeObj.getNodeByTId(nodes[i].tId);
					alert(nodes[i].tId);
					treeObj.checkNode(nodes[i], true, false);

				}
				console.log(zTree); */
			}
		}
	};
	/*========================================================================*/
	function getId(obj) {
		console.log("obj=" + obj);
	}

	$(function () {
		loadZtree();
	});
	var zNodes;
	function loadZtree() {
		var url = "product/productType/findObjects"
		$.getJSON(url, function (result) {
			if (result.state == 1) {
				$(".type_style").data("data", result.data);
				zNodes = result.data;
				//初始化Ztree数据
				var t = $("#treeDemo");
				zTree = $.fn.zTree.init(
					t,
					setting,
					zNodes)
			}
			else alert(result.message);
		})
	}
	/*========================================================================*/
	/* var zNodes = [
		{ id: 1, pId: 0, name: "商城分类列表", open: true },
		{ id: 11, pId: 1, name: "蔬菜水果" },
		{ id: 111, pId: 11, name: "蔬菜" },
		{ id: 112, pId: 11, name: "苹果" },
		{ id: 113, pId: 11, name: "大蒜" },
		{ id: 114, pId: 11, name: "白菜" },
		{ id: 115, pId: 11, name: "青菜" },
		{ id: 12, pId: 1, name: "手机数码" },
		{ id: 121, pId: 12, name: "手机 " },
		{ id: 122, pId: 12, name: "照相机 " },
		{ id: 13, pId: 1, name: "电脑配件" },
		{ id: 131, pId: 13, name: "手机 " },
		{ id: 122, pId: 13, name: "照相机 " },
		{ id: 14, pId: 1, name: "服装鞋帽" },
		{ id: 141, pId: 14, name: "手机 " },
		{ id: 42, pId: 14, name: "照相机 " },
	]; */

	var code;

	function showCode(str) {
		if (!code) code = $("#code");
		code.empty();
		code.append("<li>" + str + "</li>");
	}

	$(document).ready(function () {
		var t = $("#treeDemo");
		t = $.fn.zTree.init(t, setting, zNodes);
		demoIframe = $("#testIframe");
		//demoIframe.bind("load", loadReady);
		var zTree = $.fn.zTree.getZTreeObj("tree");
		//zTree.selectNode(zTree.getNodeByParam("id",'11'));
	});
	/*产品-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', function (index) {
			var url = "/product/doUpdateState";
			var params = {
				"id": id,
				"productState": 2
			};
			$.getJSON(url, params, function () {
				$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,' + id + ')" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>');

				$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">停用</span>');
				$(obj).remove();
				layer.msg('已停用!', { icon: 5, time: 1000 });
			});
		});
	}

	/*产品-启用*/
	function member_start(obj, id) {
		layer.confirm('确认要启用吗？', function (index) {
			var url = "/product/doUpdateState";
			var params = {
				"id": id,
				"productState": 1
			};
			$.getJSON(url, params, function () {
				//console.log("getJSON");
				$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,' + id + ')" href="javascript:;" title="停用"><i class="icon-ok bigger-120"></i></a>');
				$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">启用</span>');
				$(obj).remove();
				layer.msg('已启用!', { icon: 6, time: 1000 });
			});
		});
	}
	/*产品-编辑*/
	function member_edit(title, url, w, h) {
		layer_show(title, url, w, h);
	}

	/*产品-删除*/
	function member_del(obj, id) {
		layer.confirm('确认要删除吗？', function (index) {
			doDeleteProducts(obj, id);
		});
	}

	function doDeleteProducts(obj, ids) {
		var url = "/product/doDeleteProducts";
		$.getJSON(url, { "ids": ids }, function () {
			$(obj).parents("tr").remove();
			layer.msg('已删除!', { icon: 1, time: 1000 });
			getObjects();
		});
	}

	//获取选中记录的id并存储到数组
	function doGetCheckedIds() {
		//1.定义数组 
		var idArray = [];
		//2.获取tbody中选中checkbox对象的值
		$("#tbodyId input[type=checkbox]")
			.each(function () {//发现checkbox则回调此函数
				if ($(this).prop("checked")) {
					var id = Number($(this).prop("value"));
					//console.log("this=" + id);
					idArray.push(id);
				}
			});
		//3.返回数组
		return idArray;
	}

	//面包屑返回值
	var index = parent.layer.getFrameIndex(window.name);
	parent.layer.iframeAuto(index);
	$('.Order_form').on('click', function () {
		var cname = $(this).attr("title");
		var chref = $(this).attr("href");
		var cnames = parent.$('.Current_page').html();
		var herf = parent.$("#iframe").attr("src");
		parent.$('#parentIframe').html(cname);
		parent.$('#iframe').attr("src", chref).ready();;
		parent.$('#parentIframe').css("display", "inline-block");
		parent.$('.Current_page').attr({ "name": herf, "href": "javascript:void(0)" }).css({ "color": "#4c8fbd", "cursor": "pointer" });
		//parent.$('.Current_page').html("<a href='javascript:void(0)' name="+herf+" class='iframeurl'>" + cnames + "</a>");
		parent.layer.close(index);
	});
</script>